<template>
  <view>
    <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
    	<view class="offical-account-modal">
        
        <view class="qrcode-block" :style="{backgroundImage:'url('+bg+')'}">
          <view class="text-main">送
          <text class="num">{{discountNum}}</text>
          折优惠券</view>
          <image :show-menu-by-longpress='true' class="qrcode-img" :src="qrcode" mode="aspectFill"></image>
          <view class="tip-text">
            长按二维码识别 领取福利
          </view>
        </view>
        <view class="close-icon" @click="closeHandle">
          <u-icon name="close-circle" color="rgba(255,255,255,.7)" size="36"></u-icon>
        </view>
        <!-- <view class="meta-info">
          <view class="meta-title">长按二维码识别公众号</view>
          <view class="process-list">
            <view>1、获得咨询服务提醒</view>
            <view>2、获得心理知识</view>
            <view>3、各类活动优惠资格</view>
          </view>
        </view> -->
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    // name:"offical-account-modal",
    
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      discountNum:{
        type:Number,
        default:6
      }
    },
    watch:{
      visible:{
        handler(val){
          this.show = val
        },
        immediate:true
      }
    },
    data() {
      return {
        show:false,
        bg:this.imgBaseURL+'/task-center/office-account-qrcode-modal-bg-v2.png',
        qrcode:this.imgBaseURL+'/office-account-qrcode.jpg'
      };
    },
    methods:{
      closeHandle(){
        this.show = false 
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>


  .offical-account-modal{
    height: 646rpx;
    // background-color: #fff;
    border-radius: 24rpx;
    // box-sizing: border-box;
        padding-bottom: 200rpx;

    .qrcode-block{
      // width: 600rpx;
      // height: 340rpx;
      width: 490rpx;
      height: 842rpx;
      box-sizing: border-box;
      // padding-top: 194rpx;
      padding-top: 208rpx;
      flex-direction: column;
      align-items: center;
      display: flex;
      // justify-content: center;
      // background: url('@/static/images/modal/modal-bg-1.png');
      background-size: 100% 100%;
      
      .qrcode-img{
        height: 222rpx;
        width: 222rpx;
        // margin-top: 12rpx;
        margin-top: 20rpx;
      }
      
      .num{
        font-size: 60rpx;
        font-weight: bold;
        color: #FD9847;
      }
    }
    
    .close-icon{
          display: flex;
          justify-content: center;
          margin-top: 40rpx;
    }
    
    .text-main{
      font-family: PingFangSC, PingFang SC;
      // font-weight: 500;
      font-size: 45rpx;
      color: #FD9847;
      line-height: 63rpx;
      text-align: justify;
      font-style: normal;
      
      // margin-top: 194rpx;
    }
    
    .tip-text{
      margin-top: 16rpx;
      
      border-radius: 27rpx;
      border: 1rpx solid #FD9847;
      height: 54rpx;
      line-height: 54rpx;
      padding: 0 18rpx;
      
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #F1791A;
      text-align: justify;
      font-style: normal;
    }
    .meta-info{
      display: flex;
      flex-direction: column;
      align-items: center;
      .meta-title{
        margin: 26rpx 0;
        font-size: 46rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .process-list{
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }
</style>